/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans", "Open Sans",
    "Source Sans", Helvetica, Arial, Inter, Ubuntu, Roboto, sans-serif;
  font-size: 16px;
  --ifm-color-primary: #2e8555;
  --ifm-color-primary-dark: #29784c;
  --ifm-color-primary-darker: #277148;
  --ifm-color-primary-darkest: #205d3b;
  --ifm-color-primary-light: #33925d;
  --ifm-color-primary-lighter: #359962;
  --ifm-color-primary-lightest: #3cad6e;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(17, 15, 15);

  // background color
  --normal-bg-1: rgba(17, 15, 15);
  --navbar-bg-color: rgb(7, 7, 7);
  --active-color: rgba(255, 168, 0, 1);
  --hover-fill-color: rgba(255, 61, 0, 1);
  --docs-detail-bg: rgba(22, 27, 34, 1);
  --ordered-list-bg-color: rgb(51, 34, 0);
  --ordered-list-text-color: #fff;
  --tags-bg-color: rgba(255, 168, 0, 0.15);
  --menu-bg-color: rgb(76, 50, 0);
  --hover-full-bg-text-color: rgb(0, 0, 0);
  --code-bg-color: rgb(51, 51, 51);
  --right-sidebar-circle-bg-color: rgba(48, 54, 61, 1);
  --right-sidebar-active-color: var(--active-color);
  --portrait-border-hover-color: rgb(254, 177, 25);

  // text color
  --normal-text-color: rgba(12, 14, 20, 1);
  --normal-text-color-1: rgb(0, 0, 0);
  --sub-text-color: rgba(161, 174, 191);
  --sub-text-color-1: rgba(114, 128, 149);
  --sub-text-color-2: rgba(255, 255, 255, 0.6);
  --sub-text-color-3: rgba(0, 0, 0, 0.6);
  --sub-text-color-4: rgba(0, 194, 255, 1);
  --sub-text-color-5: rgba(242, 242, 242);
  --blog-border-color: rgba(48, 54, 61, 1);
  --back-home-logo-color: rgba(76, 76, 76);
  --title-text-color: rgb(255, 255, 255);
  --ifm-breadcrumb-item-background-active: transparent;
  --ifm-breadcrumb-separator: url("/img/line.svg");

  // shape
  --ifm-menu-link-padding-horizontal: 21px !important;
  --ifm-h1-font-size: 32px !important;
  --ifm-font-family-base: -apple-system, BlinkMacSystemFont, "Noto Sans",
    "Open Sans", "Source Sans", Helvetica, Arial, Inter, Ubuntu, Roboto,
    sans-serif;
  --ifm-alert-foreground-color: red;
  --ifm-container-width-xl: var(--global-main-width);
  --ifm-global-spacing: 10px;
  --ifm-navbar-height: 98px;
  --ifm-menu-link-padding-horizontal: 25px;
  --ifm-breadcrumb-spacing: 0;

  --global-main-width: 1440px;
  --normal-box-radius: 4px;
  --doc-sidebar-width: 301px;
  --home-btn-bg: rgba(255, 168, 0, 1);
  --home-btn-color: rgb(0, 0, 0);
  --footer-bg-color: #000;
  --mobile-padding-width: 70px;
  --docs-nav-margin: 60px;
  --ifm-tabs-padding-vertical: 5px;
  --ifm-tabs-padding-horizontal: 14px;
}

@media screen and (max-width: 1024px) {
  :root {
    --global-main-width: 100%;
  }
}
@media screen and (max-width: 768px) {
  :root {
    --mobile-padding-width: 37px;
  }
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme="dark"] {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: #21af90;
  --ifm-color-primary-darker: #1fa588;
  --ifm-color-primary-darkest: #1a8870;
  --ifm-color-primary-light: #29d5b0;
  --ifm-color-primary-lighter: #32d8b4;
  --ifm-color-primary-lightest: #4fddbf;
  --ifm-background-color: #000 !important;
  --ifm-breadcrumb-color-active: rgba(255, 168, 0, 1);
  --ifm-hover-overlay: rgba(255, 168, 0, 0.3) !important;
  --ifm-menu-color-active: rgba(255, 168, 0, 1) !important;
  --ifm-menu-color: rgb(153, 153, 153) !important;
  --ifm-navbar-link-hover-color: var(--active-color);
  --ifm-color-primary: var(--active-color);
  --ifm-navbar-background-color: rgba(15, 15, 15, 0.4);
  --ifm-font-weight-semibold: 400;
  --ifm-code-background: rgb(51, 51, 51) !important;

  --code-border-color: rgb(153, 109, 26);
  --portrait-border-color: rgb(37, 38, 39);
  --box-border-color: var(--sub-text-color);
  --box-hover-border-color: var(--title-text-color);
  --sub-text-color-2: rgba(255, 255, 255, 0.6);
  --nav-link-line-normal-color: rgba(48, 54, 61, 1);
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
  --popper-bg-color: rgb(255, 168, 0);
  --popper-text-color: #3a3f63;
}

[data-theme="light"] {
  --ifm-font-color-base: #000;
  --normal-bg-1: #fff;
  --title-text-color: #000;
  --sub-text-color-2: #546e7a;
  --sub-text-color: #525665;
  --sub-text-color-1: #525665;

  --home-btn-bg: #000;
  --home-btn-color: #000;

  --box-border-color: #e0e0e0;
  --box-hover-border-color: #e0e0e0;

  --right-sidebar-circle-bg-color: #f2f2f2;
  --sub-text-color-5: #000;
  --blog-border-color: #e0e0e0;
  --docs-detail-bg: #eef9fd;
  --ordered-list-bg-color: #ffeecc;
  --ordered-list-text-color: #000;
  --ifm-menu-color-background-active: #ffe5b3;
  --right-sidebar-active-color: #000;

  --ifm-menu-color-active: #000;
  --ifm-menu-color: #000;
  --ifm-breadcrumb-color-active: var(--active-color);
  --ifm-pagination-nav-color-hover: #e0e0e0;
  --portrait-border-color: #eef9fd;
  --ifm-navbar-link-hover-color: var(--active-color);
  --popper-bg-color: #000;
  --popper-text-color: #ffffff;
  --ifm-color-primary: #000;
  --navbar-bg-color: rgb(255, 255, 255);
  .navbar-home-lighting {
    --ifm-navbar-background-color: rgba(15, 15, 15, 0.4) !important;
    --ifm-navbar-link-color: #fff;
    --home-btn-bg: rgba(255, 168, 0, 1) !important;
    --navbar-bg-color: rgb(7, 7, 7);
  }
}
